<template>
<div style="padding: 20px">
  <template>
    <Tabs :value="tabValue">
      <TabPane label="一类" name="1">
        <Table v-if="tableShow" stripe :columns="table_columns1" :data="table_data1" :loading="tableLoading">
          <template slot-scope="{ row }" slot="y_wzf">
            <span>{{row.y_zs - row.y_yzf}}</span>
          </template>
        </Table>
      </TabPane>
      <TabPane label="二类" name="2">
        <Table v-if="tableShow" stripe :columns="table_columns2" :data="table_data2" :loading="tableLoading">
          <template slot-scope="{ row }" slot="e_wzf">
            <span>{{row.e_zs - row.e_yzf}}</span>
          </template>
        </Table>
      </TabPane>
      <TabPane label="三类" name="3">
        <Table  v-if="tableShow" stripe :columns="table_columns3" :data="table_data3" :loading="tableLoading">
        </Table>
      </TabPane>
    </Tabs>
  </template>
</div>
</template>
<script>
import { findYBBQTJList } from '../../api/z-new-grid'
import { findSubordinateList } from '../../api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      severUserInfo: {},
      tableLoading: false,
      tableShow: true,
      tabValue: 0,
      table_columns1: [
        {
          title: '所属',
          key: 'name',
          align: 'center'
        },
        {
          title: '总人数',
          key: 'y_zs',
          align: 'center'
        },
        {
          title: '已走访人数',
          key: 'y_yzf',
          align: 'center'
        },
        {
          title: '未走访人数',
          slot: 'y_wzf',
          align: 'center'
        }
      ],
      table_data1: [],
      table_columns2: [
        {
          title: '所属',
          key: 'name',
          align: 'center'
        },
        {
          title: '总人数',
          key: 'e_zs',
          align: 'center'
        },
        {
          title: '已走访人数',
          key: 'e_yzf',
          align: 'center'
        },
        {
          title: '未走访人数',
          slot: 'e_wzf',
          align: 'center'
        }
      ],
      table_data2: [],
      table_columns3: [
        {
          title: '所属',
          key: 'name',
          align: 'center'
        },
        {
          title: '总人数',
          key: 's_zs',
          align: 'center'
        },
        {
          title: '已走访人数',
          key: 's_yzf',
          align: 'center'
        }
      ],
      table_data3: []

    }
  },
  methods: {
    findYBBQTJList () {
      this.tableLoading = true
      findYBBQTJList().then(ret => {
        if (ret.data.errcode === 0) {
          let data = ret.data.data
          let x1 = data.Y_ZS
          let x2 = data.Y_YZF
          this.table_data1.forEach(Yitem1 => {
            Yitem1.y_zs = 0
            Yitem1.y_yzf = 0
            x1.forEach(Yitem2 => {
              if (Yitem1.name === Yitem2.name) {
                Yitem1.y_zs = Yitem2.num
                Yitem1.y_yzf = 0
              }
            })
          })
          this.table_data1.forEach(Yitem3 => {
            x2.forEach(Yitem4 => {
              if (Yitem3.name === Yitem4.name) {
                Yitem3.y_yzf = Yitem4.num
              }
            })
          })
          let y1 = data.E_ZS
          let y2 = data.E_YZF
          this.table_data2.forEach(Eitem1 => {
            Eitem1.e_zs = 0
            Eitem1.e_yzf = 0
            y1.forEach(Eitem2 => {
              if (Eitem1.name === Eitem2.name) {
                Eitem1.e_zs = Eitem2.num
                Eitem1.e_yzf = 0
              }
            })
          })
          this.table_data2.forEach(Eitem3 => {
            y2.forEach(Eitem4 => {
              if (Eitem3.name === Eitem4.name) {
                Eitem3.e_yzf = Eitem4.num
              }
            })
          })
          let z1 = data.S_ZS
          this.table_data3.forEach(Sitem1 => {
            Sitem1.s_zs = 0
            Sitem1.s_yzf = 0
            z1.forEach(Sitem2 => {
              if (Sitem1.name === Sitem2.name) {
                Sitem1.s_zs = Sitem2.num
                Sitem1.s_yzf = Sitem2.num
              }
            })
          })
          this.tableLoading = false
          this.tableShow = false
          this.$nextTick(() => {
            this.tableShow = true
          })
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    findSubordinateList (e1, e2) {
      this.table_data1 = []
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.table_data1 = this.$common.xeUtils.clone(ret.data.data)
          this.table_data2 = this.$common.xeUtils.clone(ret.data.data)
          this.table_data3 = this.$common.xeUtils.clone(ret.data.data)
          this.findYBBQTJList()
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.findSubordinateList(this.severUserInfo.company_grade, this.severUserInfo.company_id)
  }
}
</script>

<style scoped>

</style>
